<!doctype html>
<html lang="zh-Hans-CN">

<head>
	<title>v-model</title>
	<meta charset="utf-8">
	<meta name="keywords" content="基本语法">
	<meta name="description" content="">
	<meta name="author" content="chen">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
	<!--<link rel="stylesheet" type="css/text" media="screen and ( min-width: 1200px )" href="">-->
	<link rel="stylesheet" type="text/css" media="screen" href="">
	<script defer="defer" src=""></script>
	<style>
		/*@import url("css/name.css") screen and ( min-width: 1200px );*/
	</style>
</head>

<body>
	<div id='app'>
		<div>
			<input type='text' v-model='name'/>
			<span v-show='name'>你的名字是{{name}}</span>
		</div>
		<div>
			<input type='text' v-model='age'/>
			<span v-show='age'>你的年龄是{{age}}</span>
		</div>
		<div>
			<input type='text' v-model='sex'/>
			<span v-if='sex'>你的性别是{{sex}}</span>
		</div>
	</div>
	<script src='../lib/vue.js'></script>
	<script src='./app.js'></script>
	<script>
		// vue 是一个渐进式的js框架, 可以实现用户界面显示和数据库的双向绑定
		// v-model 用来将 输入型标签 的 key 和 vue data 中的 key 绑定
		// v-model 只支持 3种 标签, <input> <textarea> <select [multipul]>
		// v-model 有 3个 修饰符
		// v-model.lazy		懒惰模式
		// v-model.trim		取消显示多余的空格
		// v-model.number	将标签的值转换为数字存储
		// {{key}} 用来从 vue data 中引用指定 key 的 value
		// v-show 和 v-if 用来控制元素是否则页面上显示, v-show 是在页面隐藏, 而 v-if 是直接从页面移除
	</script>
</body>

</html>